<#import "/macro.ftl" as m>
<@m.page_header title='后台' />
<div id="page-content-wrapper">

<div id="page-title">

    <h3>
        单个产品统计
        <small>
            类资产项目
        </small>
    </h3>
</div>
<div class="pad10A">
<div>
	<h3 class="content-box-header bg-gray">
                        <span>产品信息</span>
                    </h3>
    <div class="form-row">
        <div class="form-label col-md-2">
            <label for="">
                产品名称:
                <span class="required"></span>
            </label>
        </div>
        <div class="form-input col-md-8">
            <input type="text" id="name" name="name"  class="parsley-validated" value="${((product.name)!'')?xhtml}">
        </div>
    </div>
    <div class="form-row">
        <div class="form-label col-md-2">
            <label for="">
                期限:
                <span class="required"></span>
            </label>
        </div>
        <div class="form-input col-md-2">
            <input type="text" id="term" name="term"  data-type="number" class="parsley-validated"  value="${product.term}">
        </div>
        <div class="col-md-2">天</div>
    </div>
    <div class="form-row">
        <div class="form-label col-md-2">
            <label for="">
                年化:<span class="required"></span>
            </label>
        </div>
        <div class="form-input col-md-2">
        	<input type="hidden" id="interestRate" name="interestRate" data-type="number" data-rangelength="[1,5]" data-trigger="change"  class="parsley-validated" value="${product.interestRate}">
            <input type="text" id="interestRateDisplay" data-type="number" data-rangelength="[1,5]" data-trigger="change"  class="parsley-validated" value="${product.interestRate?number*100}">
        </div>
        <div class="col-md-2">%</div>
    </div>
    <div class="form-row">
        <div class="form-label col-md-2">
            <label for="">
                平台奖励:
            </label>
        </div>
        <div class="form-input col-md-2">
        	<input type="hidden" id="bonusRate" name="bonusRate" data-type="number" class="parsley-validated" data-rangelength="[1,5]" value="${product.bonusRate}">
            <input type="text" id="bonusRateDisplay" name="bonusRate" data-type="number" class="parsley-validated" data-rangelength="[1,5]" value="${product.bonusRate?number*100}">
        </div>
        <div class="col-md-2">%</div>
    </div>
    <div class="form-row">
        <div class="form-label col-md-2">
            <label for="">
                起息日:<span class="required"></span>
            </label>
        </div>
        <div class="form-input col-md-2">
            <input type="text"  name="valueDate"  class="parsley-validated" value="${product.valueDate?string("yyyy-MM-dd HH:mm:ss")}">
        </div>
    </div>
    <div class="form-row">
        <div class="form-label col-md-2">
            <label for="">
                总金额:<span class="required"></span>
            </label>
        </div>
        <div class="form-input col-md-2">
            <input type="text" id="totalAmount" name="totalAmount" data-type="number"  class="parsley-validated" value="${product.totalAmount}">
        </div>
        <div class="col-md-2">元</div>
    </div>
</div>
<div>    
    <h3 class="content-box-header bg-gray">
                        <span>金额</span>
                    </h3>
<div style="width:550px;float:left;">                    
    <div class="form-row">
        <div class="form-label col-md-3">
            <label for="">
                已售:<span class="required"></span>
            </label>
        </div>
        <div class="form-input col-md-5">
            <input type="text" id="soldAmount"  name="soldAmount" data-type="number"  class="parsley-validated" value="${productPaid}" > 
        </div>
        <div class="col-md-2">元</div>
    </div>
    <div class="form-row">
        <div class="form-label col-md-3">
            <label for="">
                客单:<span class="required"></span>
            </label>
        </div>
        <div class="form-input col-md-5">
            <input type="text" id="perAmount" name="perAmount" data-type="number" class="parsley-validated" value="${perAmount}">
        </div>
        <div class="col-md-2">元</div>
    </div>
    <div class="form-row">
        <div class="form-label col-md-3">
            <label for="">
                待付款:<span class="required"></span>
            </label>
        </div>
        <div class="form-input col-md-5">
            <input type="text"  id="unpayAmount"  name="unpayAmount" data-type="number" class="parsley-validated" value="${productUnpay}" >
        </div>
        <div class="col-md-2">元</div>
    </div>
    <div class="form-row">
        <div class="form-label col-md-3">
            <label for="">
                到期未付:<span class="required"></span>
            </label>
        </div>
        <div class="form-input col-md-5">
            <input type="text"  id="productOverdue"  name="productOverdue" data-type="number" class="parsley-validated" value="${productOverdue}" >
        </div>
        <div class="col-md-2">元</div>
    </div>
    <div class="form-row">
        <div class="form-label col-md-3">
            <label for="">
                支付失败:<span class="required"></span>
            </label>
        </div>
        <div class="form-input col-md-5">
            <input type="text"  id="productFailed"  name="productFailed" data-type="number" class="parsley-validated" value="${productFailed}" >
        </div>
        <div class="col-md-2">元</div>
    </div>
    <div class="form-row">
        <div class="form-label col-md-3">
            <label for="">
                超额支付:<span class="required"></span>
            </label>
        </div>
        <div class="form-input col-md-5">
            <input type="text"  id="productExcess"  name="productExcess" data-type="number" class="parsley-validated" value="${productExcess}" >
        </div>
        <div class="col-md-2">元</div>
    </div>
</div>    
    <div id="canvas-holder">
		<h5 class="text-transform-upr text-center mrg15B font-gray font-size-18">金额统计</h5>
		<div class="center-div">
			<canvas  id="chartdiv" width="250" height="250"/>
		</div>
    </div>
</div>
<div>    
    <h3 class="content-box-header bg-gray">
                        <span>人数</span>
                    </h3>
<div style="width:550px;float:left;">                    
    <div class="form-row">
        <div class="form-label col-md-3">
            <label for="">
                购买人数:<span class="required"></span>
            </label>
        </div>
        <div class="form-input col-md-5">
            <input type="text" id="numberOfShoppers" name="numberOfShoppers" data-type="number"  class="parsley-validated" value="${productAllBuyer}">
        </div>
    </div>
    <div class="form-row">
        <div class="form-label col-md-3">
            <label for="">
                待付款人数:<span class="required"></span>
            </label>
        </div>
        <div class="form-input col-md-5">
            <input type="text" id="productUnpayBuyer" name="productUnpayBuyer" data-type="number"  class="parsley-validated" value="${productUnpayBuyer}">
        </div>
    </div> 
    <div class="form-row">
        <div class="form-label col-md-3">
            <label for="">
                已付款人数:<span class="required"></span>
            </label>
        </div>
        <div class="form-input col-md-5">
            <input type="text" id="productPaidBuyer" name="productPaidBuyer" data-type="number"  class="parsley-validated" value="${productPaidBuyer}">
        </div>
    </div> 
    <div class="form-row">
        <div class="form-label col-md-3">
            <label for="">
                到期未付款人数:<span class="required"></span>
            </label>
        </div>
        <div class="form-input col-md-5">
            <input type="text" id="productOverdueBuyer" name="productOverdueBuyer" data-type="number"  class="parsley-validated" value="${productOverdueBuyer}">
        </div>
    </div> 
    <div class="form-row">
        <div class="form-label col-md-3">
            <label for="">
                支付失败人数:<span class="required"></span>
            </label>
        </div>
        <div class="form-input col-md-5">
            <input type="text" id="productFailedBuyer" name="productFailedBuyer" data-type="number"  class="parsley-validated" value="${productFailedBuyer}">
        </div>
    </div> 
    <div class="form-row">
        <div class="form-label col-md-3">
            <label for="">
                超额支付人数:<span class="required"></span>
            </label>
        </div>
        <div class="form-input col-md-5">
            <input type="text" id="productExcessBuyer" name="productExcessBuyer" data-type="number"  class="parsley-validated" value="${productExcessBuyer}">
        </div>
    </div>
</div>
	<div id="canvas-holder">
		<h5 class="text-transform-upr text-center mrg15B font-gray font-size-18">人数统计</h5>
		<div class="center-div">
			<canvas  id="chartdiv2" width="250" height="250"/>
		</div>
    </div>
</div>
<div>    
    <h3 class="content-box-header bg-gray">
                        <span>订单数</span>
                    </h3>
<div style="width:550px;float:left;">                     
    <div class="form-row">
        <div class="form-label col-md-3">
            <label for="">
                总订单数:<span class="required"></span>
            </label>
        </div>
        <div class="form-input col-md-5">
            <input type="text" id="productNumOfOrder" name="productNumOfOrder" data-type="number"  class="parsley-validated" value="${productNumOfOrder}">
        </div>
    </div>  
    <div class="form-row">
        <div class="form-label col-md-3">
            <label for="">
                待付款订单数:<span class="required"></span>
            </label>
        </div>
        <div class="form-input col-md-5">
            <input type="text" id="productUnpayOrder" name="productUnpayOrder" data-type="number"  class="parsley-validated" value="${productUnpayOrder}">
        </div>
    </div>  
    <div class="form-row">
        <div class="form-label col-md-3">
            <label for="">
                已付款订单数:<span class="required"></span>
            </label>
        </div>
        <div class="form-input col-md-5">
            <input type="text" id="productPaidOrder" name="productPaidOrder" data-type="number"  class="parsley-validated" value="${productPaidOrder}">
        </div>
    </div>  
    <div class="form-row">
        <div class="form-label col-md-3">
            <label for="">
                到期未付订单数:<span class="required"></span>
            </label>
        </div>
        <div class="form-input col-md-5">
            <input type="text" id="productOverdueOrder" name="productOverdueOrder" data-type="number"  class="parsley-validated" value="${productOverdueOrder}">
        </div>
    </div>  
    <div class="form-row">
        <div class="form-label col-md-3">
            <label for="">
                支付失败订单数:<span class="required"></span>
            </label>
        </div>
        <div class="form-input col-md-5">
            <input type="text" id="productFailedOrder" name="productFailedOrder" data-type="number"  class="parsley-validated" value="${productFailedOrder}">
        </div>
    </div>  
    <div class="form-row">
        <div class="form-label col-md-3">
            <label for="">
                超额支付订单数:<span class="required"></span>
            </label>
        </div>
        <div class="form-input col-md-5">
            <input type="text" id="productExcessOrder" name="productExcessOrder" data-type="number"  class="parsley-validated" value="${productExcessOrder}">
        </div>
    </div>  
</div>
   <div id="canvas-holder">
		<h5 class="text-transform-upr text-center mrg15B font-gray font-size-18">订单数统计</h5>
		<div class="center-div">
			<canvas  id="chartdiv3" width="250" height="250"/>
		</div>
    </div>
</div>       

</div>

</div>
<script type="text/javascript" src="/assets/js/minified/demo/Chart.js"></script>
<script>
var pieData = [
				{
					value: ${productUnpay},
					color:"#F7464A",
					highlight: "#FF5A5E",
					label: "待付款金额"
				},
				{
					value: ${productPaid},
					color: "#46BFBD",
					highlight: "#5AD3D1",
					label: "已付款金额"
				},
				{
					value: ${productOverdue},
					color: "#FDB45C",
					highlight: "#FFC870",
					label: "到期未付金额"
				},
				{
					value: ${productFailed},
					color: "#949FB1",
					highlight: "#A8B3C5",
					label: "支付失败金额"
				},
				{
					value: ${productExcess},
					color: "#4D5360",
					highlight: "#616774",
					label: "超额支付金额"
				}

			];
			
			var pieData2 = [
				{
					value: ${productUnpayBuyer},
					color:"#F7464A",
					highlight: "#FF5A5E",
					label: "待付款人数"
				},
				{
					value: ${productPaidBuyer},
					color: "#46BFBD",
					highlight: "#5AD3D1",
					label: "已付款人数"
				},
				{
					value: ${productOverdueBuyer},
					color: "#FDB45C",
					highlight: "#FFC870",
					label: "到期未付人数"
				},
				{
					value: ${productFailedBuyer},
					color: "#949FB1",
					highlight: "#A8B3C5",
					label: "支付失败人数"
				},
				{
					value: ${productExcessBuyer},
					color: "#4D5360",
					highlight: "#616774",
					label: "超额支付人数"
				}

			];
			
			var pieData3 = [
				{
					value: ${productUnpayOrder},
					color:"#F7464A",
					highlight: "#FF5A5E",
					label: "待付款订单数"
				},
				{
					value: ${productPaidOrder},
					color: "#46BFBD",
					highlight: "#5AD3D1",
					label: "已付款订单数"
				},
				{
					value: ${productOverdueOrder},
					color: "#FDB45C",
					highlight: "#FFC870",
					label: "到期未付订单数"
				},
				{
					value: ${productFailedOrder},
					color: "#949FB1",
					highlight: "#A8B3C5",
					label: "支付失败订单数"
				},
				{
					value: ${productExcessOrder},
					color: "#4D5360",
					highlight: "#616774",
					label: "超额支付订单数"
				}

			];
			
			window.onload = function(){
				var ctx = document.getElementById("chartdiv").getContext("2d");
				var ctx2 = document.getElementById("chartdiv2").getContext("2d");
				var ctx3 = document.getElementById("chartdiv3").getContext("2d");
				window.myPie = new Chart(ctx).Pie(pieData);
				window.myPie = new Chart(ctx2).Pie(pieData2);
				window.myPie = new Chart(ctx3).Pie(pieData3);
			};


</script>